<template>
  <div class="app-container">
    <!-- 模板详情 -->
    <div class="formatList">
      <el-form ref="form"  :model="form" label-width="150px" :disabled="disabled">
        <el-row>
          <el-col :span="24">
            <el-form-item label="模板名称" prop="name">
              <el-input v-model="form.name" placeholder="最多20个字符" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模板说明" prop="detail">
              <el-input
                v-model="form.detail"
                type="textarea"
                size="large"
                :rows="4"
                placeholder="最多100个字符"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="使用地区" prop="province_name">
              <el-input v-model="form.province_name" />
              <!-- <el-select v-model="form.province_id" placeholder="请选择">
                                <el-option
                                    v-for="(item,index) in regionType"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.value"
                                />
                            </el-select>-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <h5 class="font_16 mt_20">平台卡券</h5>
    <el-table ref="tableData" :data="tableData" style="width: 100%">
      <el-table-column prop="ticket_type" label="优惠券类型" />
      <el-table-column prop="scope" label="适用范围" />
      <el-table-column prop="type_name" label="优惠券名称" />
      <el-table-column prop="available" label="优惠券对应商品" />
      <el-table-column prop="type_money" label="优惠券金额" />
      <el-table-column prop="createAt" label="有效期">
        <template slot-scope="scope">
          <span
            v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
          >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
          <span v-else />
        </template>
      </el-table-column>
      <!-- <el-table-column prop="tiket_count" label="张数" /> -->
      <el-table-column prop="num" label="数量">
        <template slot-scope="scope">
          <span>{{ scope.row.num=1 }}</span>
        </template>
      </el-table-column>
    </el-table>
    <h5 class="font_16 mt_20">医美卡券</h5>
    <el-table ref="tableData1" :data="tableData1" style="width: 100%">
      <el-table-column prop="ticket_type" label="优惠券类型" />
      <el-table-column prop="hospital_name" label="适用范围" />
      <el-table-column prop="type_name" label="优惠券名称" />
      <el-table-column prop="project_name" label="优惠券对应项目" />
      <el-table-column prop="createAt" label="有效期">
        <template slot-scope="scope">
          <span
            v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
          >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
          <span v-else />
        </template>
      </el-table-column>
      <!-- <el-table-column prop="tiket_count" label="张数" /> -->
      <el-table-column prop="num1" label="数量">
        <template slot-scope="scope">
          <span>{{ scope.row.num1=1 }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { detailTem } from '@/api/plusMange'
export default {
  name: 'PlusFormatInfo',
  data() {
    return {
      form: {
        name: '',
        detail: '',
        province_name: ''
      },
      regionType: [],
      tableData: [], // 平台
      tableData1: [], // 医美
      disabled: true
    }
  },
  created() {
    this.detailsList({ id: this.$route.query.id })
  },
  methods: {
    detailsList(e) {
      detailTem(e)
        .then(res => {
          // console.log(res)
          if (res.data.code == 200) {
            // console.log(res)
            const resData = res.data.data
            // this.page_totals = res.data.meta.total;
            this.tableData = resData.goods_tickets_list
            this.tableData1 = resData.beauty_tickets_list
            this.form.name = resData.base_info.name
            this.form.detail = resData.base_info.detail
            this.form.province_name =
                            resData.base_info.province_name
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            })
          }
        })
        .catch(err => {
          // console.log(err)
          this.errorStatus(err.msg)
        })
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      })
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, 'success')
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, 'error')
    }
  }
}
</script>
<style scoped>
.el-range-editor--medium.el-input__inner {
    width: 236px;
}
/* 分页样式 */
.pagesCon {
    margin-top: 20px;
    text-align: right;
}
.font_16 {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin: 0;
    margin-bottom: 10px;
}
.mt_20 {
    margin-top: 20px;
}
</style>
